<template>
  <div>
    <xxl-out-excel 
    :exportList="[exportList,exportList]" 
    :columnDefs="[columnDefs,columnDefs]" 
    :sheetnames="['sheet1','sheet2']" 
    :filename="filename"
    @on-out-begin="outBegin"
    @on-out-succeed="outSucceed"
    />
    <el-button @click="goToDownExcel">后端接口导出excel(通过二进制流)</el-button>
    <el-button @click="goToDownExcelBySteam">后端接口导出excel(通过字节流)</el-button>
  </div>
</template>
<script>
import { saveAs } from 'file-saver';
import xxlOutExcel from "@/components/xxl-out-excel/index.vue";
import {downloadExcel,downloadExcelBySteam } from '@/api/xxl-utils-demo/excel/index.js'
import {getExcelByBolb} from '@/utils/document.js'
export default {
  components: {
    xxlOutExcel,
  },
  data() {
    const tableList = [];
    for (let i = 0; i < 10; i++) {
      tableList.push({
        name: `${i}小溪流`,
        sex: "男",
        company: "基金公司",
        phoennNumber: "13680086357",
        email: "xxxx@qq.com",
        num: i + 1,
        money:123456.8398 + i,
        date: "2024-01-02",
      });
    }
    return {
      filename:'班级汇总表',
      exportList: tableList,
      columnDefs: [
        {
          field: "name",
          headerName: "姓名",
        },
        {
          field: "sex",
          headerName: "性别",
          exportArgument: {
           width:16
          },
        },
        {
          field: "company",
          headerName: "公司",
        },
        {
          field: "phoennNumber",
          headerName: "电话号码",
        },
        {
          field: "email",
          headerName: "电子邮箱",
        },
        {
          field: "num",
          headerName: "数字",
          exportArgument: {
            type: "number",
          },
        },
        {
          field: "money",
          headerName: "金额",
          exportArgument: {
            type: "amount",
          },
        },
        {
          field: "date",
          headerName: "日期",
          exportArgument: {
            type: "date",
          },
        },
      ],
    };
  },
  methods: {
    async goToDownExcelBySteam(){
      const res = await downloadExcelBySteam()
    },
    async goToDownExcel(){
      const res = await downloadExcel()
      // saveAs(
      //       new Blob([res], {
      //           type: "application/octet-stream",
      //       }),
      //       `表格.xlsx`
      //   );
      // let url = window.URL.createObjectURL(data)
      // console.log('url>>>',url)
      //   saveAs(
      //     url,
      //       `表格.xlsx`
      //   );
        getExcelByBolb(res,`表格.xlsx`)
    },
    async outBegin(){
      this.filename =await this.getFileName()
      console.log('开始导出...')
      return true
    },
    outSucceed(){
      console.log('结束导出...')
    },
    async getFileName(){
      return '可以随意定制导出的excel名字'
    }
  },
};
</script>
